/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Card, Col, DatePicker, Drawer, Form, Input, Row, Select, Statistic, Table} from 'antd';
import styles from '../../index.less';

import ViewTitle from '../../../components/ViewTitle';
import FormBase from '../../../components/Base/FormBase';
import notify from "../../../components/NotificationExtra";
import {FormField, ModalView, SearchForm} from 'antd-extra';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ModalStoreDetail from "./../modal/ModalStoreDetail";
import {exportExcel} from "../../../utils/excelUtils";
import ModalEditStoreCount from "./../modal/ModalEditStoreCount";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');
const {Option} = Select;
const table = 'Material';
const title = '库存';

@Form.create()
@connect(({
            user,
            global,
            material,
            dynamicLabel,
            store
          }) => ({...user, ...material, ...global, ...store, ...dynamicLabel}))
export default class VendorAssess extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const {dispatch} = this.props;
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });
    dispatch && dispatch({
      type: 'global/getModel',
      payload: {table}
    });

    // this.props.dispatch({
    //   type: 'material/findMany',
    //   payload
    // });
    // this.props.dispatch({
    //   type: 'store/statistics',
    //   payload
    // });
  }

  onEdit = values => {
    //  notify({type: 'info', message: "待开发"});
    ModalView.open(ModalEditStoreCount, {
      title,
      width: '920px'
    }, {
      values,
      callback: (record) => {
        console.log(record);
        const {code} = values;
        const info = this.getLoginInfo();
        record.code = code;
        record.createUser = info.username;
        record.createUsername = info.nickname;
        this.props.dispatch({
          type: 'material/updateStoreCount',
          payload: record
        }).then(res => {
          //  this.requestReturn(res)
          this.componentDidMount();
        });
      }
    });
  };
  columns = () => {
    const model = this.props[`${table}Model`];
    if (!model) return [];
    let temp = [
      {
        title: '编码',
        dataIndex: 'code',
        key: 'code',
      },
      {
        title: '物料名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '物料规格',
        dataIndex: 'spec',
        key: 'spec',
      },
      {
        title: '物料类别',
        dataIndex: 'type',
        key: 'type',
      },
      {
        title: '物料型号',
        dataIndex: 'number',
        key: 'number',
      },
      {
        title: '形态',
        dataIndex: 'subcategory',
        key: 'subcategory',
      },
      {
        title: '库存数量',
        dataIndex: 'storeCount',
        key: 'storeCount',
      },
      {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
      },
      {
        title: '库存数量',
        dataIndex: 'storeCount',
        key: 'storeCount'
      },
      {
        title: '更新时间',
        dataIndex: 'updatedTs',
        key: 'updatedTs',

        render: value => {
          return <div>{moment(value).format('YYYY-MM-DD hh:mm:ss')}</div>;
        }
      },
      {
        title: '操作', dataIndex: 'operation', key: 'operation',

        render: (value, record) => {
          return (
            <span>
           {<a style={{marginRight: '6px'}}
               onClick={() => {
                 //notify({type: 'info', message: "待开发"})
                 this.setState({showDetail: true, record});
               }}>详情</a>}

              <a style={{marginRight: '6px'}}
                 onClick={() => this.onEdit(record)}>调整库存数量</a>
            </span>
          );
        }
      }
    ];
    return temp;
  };
  getSearchFields = () => {
    const arr = [
      <FormField
        label="供应商名称"
        name="vendor"
        key={6}
      >
        <Input allowClear placeholder={`请输入供应商名称`}/>
      </FormField>,

    ];
    return arr;

  };
  export = () => {
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });

    this.props.dispatch({
      type: 'store/exportExcel',
      payload
    }).then(res => {
      if (res) {
        const {result = {}} = res;
        const {header, data} = result;
        exportExcel(header, data, '库存');
      }
    });
  };


  render() {
    const {vendorStore=[], _notify, form, vendorAssess = {}} = this.props;
    const {showDetail, record = {}} = this.state;
    const {count = 0, amount = 0} = vendorAssess;

    if (_notify) {
      notify(_notify);
    }

    return (
      <div>
        <ViewTitle
          title={`供应商库存列表`}
          level={1}
          // actions={[<Button onClick={() => this.export()}>导出</Button>]}
        ></ViewTitle>
        <SearchForm
          style={{marginLeft: '6px', marginRight: '6px'}}
          onSearch={() => {
            this.state.current = 1;
            this.componentDidMount();
          }}
          onReset={this.handleReset}
          cols={3}
          min={6}
          expandText="展开"
          form={form}
        >
          {this.getSearchFields()}
        </SearchForm>
        <div style={{background: '#ECECEC', padding: '30px'}}>
          <Row gutter={16}>
            <Col span={10}>
              <Card>
                <Statistic
                  title="库存总数量"
                  value={count}
                  precision={2}
                  valueStyle={{color: '#3f8600'}}
                  suffix="KG"
                />
              </Card>
            </Col>
            <Col span={10}>
              <Card>
                <Statistic
                  title="库存总金额"
                  value={amount}
                  precision={2}
                  valueStyle={{color: '#cf1322'}}
                  suffix="元"
                />
              </Card>
            </Col>
          </Row>
        </div>
        <Table
          className={styles.antTable}
          bordered={true}
          columns={this.columns()}
          dataSource={vendorStore}
          //   scroll={{x: true}}
          pagination={true}

        ></Table>

        {showDetail && <Drawer
          visible={showDetail}
          title={`${title}详情`}
          placement="left"
          width={'80%'}
          style={{padding: 0}}
          onClose={() => {
            this.setState({showDetail: false});
          }}
        >
          <ModalStoreDetail
            values={record}
          > </ModalStoreDetail>
        </Drawer>}
      </div>
    );
  }
}
